<template>
  <div style="height: 100%">
    <navbar :title="$route.query.title"></navbar>
    <div class="content-noBottom">
      <div class="img-container">
        <img :src="appUrl + specialData.artIconFile" alt=""/>
        <div class="img-title">
               <span class="desc-container" @click="operationLike()" v-if="specialData.artAllowLikes === 1">
                    <van-icon name="good-job-o" size="18" :style="{color: (specialData.isLike === 1 ? '#1da1f2':'#FFF')}" /><!---->
                     <span :style="{color: (specialData.isLike === 1 ? '#1da1f2':'#FFF')}">{{specialData.likeCount || 0}}</span>
                   </span>
                   <span v-else />
          <span class="desc-container" @click="operationCollect()">
                     <van-icon name="star-o" size="18" :style="{color: (specialData.isFavorite === 1 ? '#1da1f2':'#FFF')}"/>
                     <span :style="{color: (specialData.isFavorite === 1 ? '#1da1f2':'#FFF')}">{{specialData.favoriteCount || 0}}</span>
                   </span>
        </div>
      </div>
      <div class="content-container">
        <h2>{{$t('information_detail')}}</h2>
        <div class="body">
          <div >
            <h6 style="">{{$t('information_title')}}：</h6>
            <div  class="html-container" v-html="$xss(specialData.artTitle)"></div>
          </div>
          <div  style="margin:20px 0">
            <h6>{{$t('introduction')}}：</h6>
            <div  class="html-container" v-html="$xss(specialData.artIntroduction)"></div>
          </div>
          <div>
            <h6>{{$t('information_content')}}：</h6>
            <div  class="html-container" v-html="$xss(specialData.artContent)"></div>
          </div>
        </div>
      </div>
       <div class="detail-btnRead info-details__btn-read" v-if="specialData.artAllowReceipt === 1">
            <div v-debounce="sendFreshReceipt" v-if="!isReceipt">
                {{ $t("information_readed_01") }}<!--我已阅读该公告-->
            </div>
            <div class="cur" v-else>
                {{ $t("information_readed_02") }}<!--已阅读-->
            </div>
        </div>
    </div>
    <common-loading :isLoading="isLoading"></common-loading>
  </div>
</template>

<script>
import {Icon} from 'vant';
export default {
    name: 'FreshInformationDetails',
    components: { [Icon.name]: Icon },
    data() {
        return {
            specialData: {},
            isLoading: false,
            hasliking: true,
            hascollect: true,
            isReceipt: false
        };
    },
    methods: {
        // 给富文本中的图片添加域名(使用正则表达式来匹配图片标签，并在匹配到的标签中添加域名)
        addDomainToImages(html, domain) {
            const imgRegex = /<img[^>]+src="([^">]+)"/g;
            const replacedHtml = html.replace(imgRegex, (match, src) => {
                if (!src.startsWith('http') && !src.startsWith('data')) {
                    // 如果图片的src不是以 http 或 data 开头，则添加域名
                    return match.replace(src, `${domain}${src}`);
                }
                return match;
            });
            return replacedHtml;
        },
        // 给富文本中的视频添加域名(使用正则表达式来匹配视频标签，并在匹配到的标签中添加域名)
        addDomainToVideos(html, domain) {
            const videoRegex = /<video[^>]+src="([^">]+)"/g;
            const replacedHtml = html.replace(videoRegex, (match, src) => {
                if (!src.startsWith('http') && !src.startsWith('data')) {
                    // 如果视频的src不是以 http 或 data 开头，则添加域名
                    return match.replace(src, `${domain}${src}`);
                }
                return match;
            });
            return replacedHtml;
        },
        getSpecialData() {
            this.isLoading = true;
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/article/detail/${this.$route.query.id}`
            }).then(res => {
                if (res && res.status === 200) {
                    this.specialData = res.data;
                    this.isReceipt = typeof res.data.artReceipt === 'number' && res.data.artReceipt > 0;
                    this.specialData.artContent = this.addDomainToImages(this.specialData.artContent, this.appUrl);
                    this.specialData.artContent = this.addDomainToVideos(this.specialData.artContent, this.appUrl);
                }
                this.isLoading = false;
            });
        },
        //点赞
        operationLike() {
            if (this.hasliking) {
                this.hasliking = false;
                let flag = this.specialData.isLike === 1;
                this.$axios({
                    method: 'POST',
                    url: `/app/api/valuation/like`,
                    data: {
                        isComment: false,
                        isLike: !flag,
                        targetId: this.specialData.artId,
                        typeEnum: 'ARTICLE'
                    }
                }).then(() => {
                    if (flag) { //取消点赞
                        this.specialData.isLike = 0;
                        this.specialData.likeCount = this.specialData.likeCount - 1;
                    } else {
                        this.specialData.isLike = 1;
                        this.specialData.likeCount = this.specialData.likeCount + 1;
                    }
                    this.hasliking = true;
                });
            }
        },
        //收藏
        operationCollect() {
            if (this.hascollect) {
                this.hascollect = false;
                let flag = this.specialData.isFavorite === 1;
                let method = 'POST';
                if (flag) {
                    method = 'DELETE';
                }
                this.$axios({
                    method: method,
                    url: `/app/api/collect`,
                    params: {
                        targetId: this.specialData.artId,
                        module: 'ARTICLE'
                    }
                }).then(() => {
                    if (flag) {
                        this.specialData.isFavorite = 0;
                        this.specialData.favoriteCount = this.specialData.favoriteCount - 1;
                    } else {
                        this.specialData.isFavorite = 1;
                        this.specialData.favoriteCount = this.specialData.favoriteCount + 1;
                    }
                    this.hascollect = true;
                });
            }
        },
        sendFreshReceipt() {
            this.$axios({
                url: `/app/api/trainee/article/sign-read/${this.$route.query.id}`
            }).then(() => {
                this.getSpecialData();
            });
        }
    },
    mounted() {
        this.getSpecialData();
    }
};
</script>

<style scoped lang="less">
  .content-noBottom{
     display: flex;
     flex-direction: column;
     width: 100%;
    .img-container{
      width: 100%;
      height: 150px;
      min-height: 150px;
      background: #c9c9c9;
      position: relative;
      img{
        width: 100%;
        min-width: 100%;
        height: 100%;
      }
      .img-title{
        display: flex;
        justify-content: space-between;
        width: 100%;
        position: absolute;
        bottom: -0.5%;
        background-color: #33333380;
        color: #ffffff;
        line-height: 26px;
        .desc-container{
          display: flex;
          align-items: center;
          margin: 0 25px;
          span{
            color: #FFF;
            font-size: 14px;
            margin-left: 5px;
          }
        }
      }
    }
    .content-container{
      padding: 10px;
      background-color: #fff;
      // min-height: calc(100% - 170px);
      width: calc(100vw - 20px);
      padding-bottom: 60px;
      h2::before{
        content: '';
        width: 5px;
        height: 15px;
        border-radius: 10px;
        display: inline-block;
        background-color: #075ebb;
        margin-right: 11px;
        margin-bottom: -2px;
      }
      h2{
        font-size: 16px;
        font-weight: bold
      }
      .body{
        padding: 10px;
        max-width: 100%;
        .html-container {
          position: relative;
          margin-top: 5px;
          /deep/video{
            width: 100%;
          }
        }
      }
    }
  }
</style>
<style>
</style>
